import React, { Component } from 'react';
import styles from './index.less';
import { Descriptions } from 'antd';

class Threeitem extends Component {
  render() {
    const { style, title, data = {} } = this.props;

    return (
      <div className={styles.threeWrap} style={{ ...style }}>
        <Descriptions column={6} layout="vertical" bordered>
          <Descriptions.Item label=""><span style={{ fontWeight: 'bold' }}>{title.observeNum}</span></Descriptions.Item>
          <Descriptions.Item
            label={title.one}>{data.repay_succ1 === '' ? '无记录' : data.repay_succ1}</Descriptions.Item>
          {data.repay_succ3 ? (<><Descriptions.Item
            label={title.three}>{data.repay_succ3 === '' ? '无记录' : data.repay_succ3}</Descriptions.Item>
          </>) : null}
          {data.repay_succ6 ? (<><Descriptions.Item
            label={title.six}>{data.repay_succ6 === '' ? '无记录' : data.repay_succ6}</Descriptions.Item>
          </>) : null}
          <Descriptions.Item
            label={title.twelve}>{data.repay_succ12 === '' ? '无记录' : data.repay_succ12}</Descriptions.Item>
          {data.repay_succ24 ? (<><Descriptions.Item
            label={title.twentyfour}>{data.repay_succ24 === '' ? '无记录' : data.repay_succ24}</Descriptions.Item>
          </>) : null}
        </Descriptions>
        <br/>
        <Descriptions column={6} layout="vertical" bordered>
          <Descriptions.Item label=""><span
            style={{ fontWeight: 'bold' }}>{title.unobserveNum}</span></Descriptions.Item>
          <Descriptions.Item
            label={title.one}>{data.repay_fail1 === '' ? '无记录' : data.repay_fail1}</Descriptions.Item>
          {data.repay_fail3 ? (<><Descriptions.Item
            label={title.three}>{data.repay_fail3 === '' ? '无记录' : data.repay_fail3}</Descriptions.Item>
          </>) : null}
          {data.repay_fail6 ? (<><Descriptions.Item
            label={title.six}>{data.repay_fail6 === '' ? '无记录' : data.repay_fail6}</Descriptions.Item>
          </>) : null}
          <Descriptions.Item
            label={title.twelve}>{data.repay_fail12 === '' ? '无记录' : data.repay_fail12}</Descriptions.Item>
          {data.repay_fail24 ? (<><Descriptions.Item
            label={title.twentyfour}>{data.repay_fail24 === '' ? '无记录' : data.repay_fail24}</Descriptions.Item>
          </>) : null}
        </Descriptions>
      </div>
    )
  }
}

export default Threeitem;
